<template>
  <view 
    class="custom-checkbox" 
    :class="{ 'checked': internalChecked }"
    @click="toggleChecked"
  >
    <text class="check-icon">{{ internalChecked ? '✔' : '' }}</text>
    <checkbox 
      :value="value" 
      :checked="internalChecked" 
      style="opacity: 0; position: absolute; width: 0; height: 0;"
    />
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Boolean],
      default: ''
    },
    checked: { // 重命名为 `modelValue` 符合 Vue 规范
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      internalChecked: this.checked // 使用内部数据存储状态
    };
  },
  watch: {
    checked(newVal) { // 监听父组件传递的 checked 值
      this.internalChecked = newVal;
    }
  },
  methods: {
    toggleChecked() {
      this.internalChecked = !this.internalChecked;
      this.$emit('update:modelValue', this.internalChecked); // 触发更新事件
      this.$emit('change', this.internalChecked); // 保留自定义事件
    }
  }
}
</script>

<style scoped>
.custom-checkbox {
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.checked {
  border-color: #FA6401;
  background-color: #FA6401;
}

.check-icon {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}
</style>